import { Component } from '@angular/core'
import {
  IonicPage,
  NavController,
  NavParams,
  AlertController,
  ToastController,
  ModalController
} from 'ionic-angular'
import { HttpServicesProvider } from '../../../providers/http-services/http-services'
import { ContactPage } from '../../contact/contact'

@IonicPage()
@Component({
  selector: 'page-change-information',
  templateUrl: 'change-information.html'
})
export class ChangeInformationPage {
  info: {
    imgPath: string
    username: string
    email: string
    mobile: string
    phone: string
    sex: string
    sign: string
  } = {
    imgPath: '../../../../assets/imgs/login/logo.png',
    username: 'isoft',
    email: '7894561123@qq.com',
    mobile: '13478974565',
    phone: '024-123456',
    sex: '1',
    sign: 'qwewereretrtr'
  }

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private alertCtrl: AlertController,
    private modalCtrl: ModalController,
    private httpService: HttpServicesProvider,
    private toastCtrl: ToastController
  ) {
    this.httpService.requestDataGet(
      'sys/user/info.json',
      {},
      {},
      (status, datas) => {
        if (status) {
          this.info.username = datas.user.username
          this.info.email = datas.user.email
          this.info.mobile = datas.user.mobile
          this.info.sex = datas.user.sex
          this.info.phone = datas.user.phone
          this.info.sign = datas.user.sign
        }
      }
    )
  }

  save() {
    let data = { ...this.info }
    this.httpService.requestDataPost(
      'sys/user/update',
      data,
      {},
      (status, datas) => {
        if (status) {
          let params = datas.message
          this.presentToast(params)
        }
      }
    )
  }

  inputChange(param) {
    let name = ''
    switch (param) {
      case 'userName':
        name = '用户名'
        break
      case 'email':
        name = '电子邮箱'
        break
      case 'mobile':
        name = '手机号码'
        break
      case 'phone':
        name = '办公电话'
        break
    }
    let alert = this.alertCtrl.create({
      title: `${name}`,
      inputs: [
        {
          name: param,
          placeholder: `请输入${name}`,
          value: this.info[param]
        }
      ],
      buttons: [
        {
          text: '取消',
          role: 'cancel',
          handler: data => {
            console.log('Cancel clicked')
          }
        },
        {
          text: '确定',
          handler: data => {
            this.info[`${param}`] = data[`${param}`]
          }
        }
      ]
    })
    alert.present()
  }

  radioChange() {
    let alert = this.alertCtrl.create()
    alert.setTitle('性别')

    alert.addInput({
      type: 'radio',
      label: '男',
      value: '1',
      checked: this.info.sex === '1' ? true : false
    })
    alert.addInput({
      type: 'radio',
      label: '女',
      value: '2',
      checked: this.info['sex'] === '1' ? false : true
    })

    alert.addButton('取消')
    alert.addButton({
      text: '确定',
      handler: data => {
        this.info.sex = data === '1' ? '1' : '2'
      }
    })
    alert.present()
  }

  textareaChange(param) {
    let alert = this.alertCtrl.create()
    alert.setTitle('个性签名')

    alert.addInput({
      type: 'textarea',
      name: param,
      placeholder: `请输入${name}`,
      value: this.info[param]
    })

    alert.addButton('取消')
    alert.addButton({
      text: '确定',
      handler: data => {
        this.info.sex = data === '1' ? '1' : '2'
      }
    })
    alert.present()
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ChangeInformationPage')
  }

  presentToast(message) {
    let toast = this.toastCtrl.create({
      message: message,
      duration: 1500,
      position: 'middle'
    })

    toast.onDidDismiss(() => {
      this.navCtrl.pop()
    })

    toast.present()
  }
}
